<template>
  <div class="ex-in-the-media" v-if="video_1">
    <div class="eitm-title">
      <div class="t1">
        <p>EXEED</p>in the Media
      </div>
      <div class="des">Introduction to EXEED in the Media</div>
    </div>
    <div class="eitm-content-img">
      <video :src="video_1.resourceUrl" loop autoplay muted></video>
    </div>
    <div class="eitm-type">
      <div class="et-content">
        <div class="et-left">
          <div class="et-left-title">{{ video_1.title }}</div>
          <div class="et-left-date">{{ dateFilter(video_1.publishTime, "MM/yyyy") }}</div>
        </div>
        <div class="et-right">
<!--          {{ video_1.des }}-->
          <div class="emc-btn" @click="downloadClick(video_1.resourceUrl)"></div>
        </div>
      </div>
    </div>
    <div class="eitm-content">
      <div class="eitm-card" v-if="video_2">
        <div class="eitm-img" @click="showDetail(video_2)">
          <img :src="video_2.coverUrl">
          <div class="cover">
            <img src="/video/play2.png">
          </div>
        </div>
        <!--                <div class="ei-type">Media type</div>-->
        <div class="ei-title">{{ video_2.title }}</div>
        <div class="ei-date">{{ dateFilter(video_2.publishTime, "MM/yyyy") }}</div>
      </div>
      <div class="eitm-card" v-if="video_3">
        <div class="eitm-img" @click="showDetail(video_3)">
          <img :src="video_3.coverUrl">
          <div class="cover">
            <img src="/video/play2.png">
          </div>
        </div>
        <!--                <div class="ei-type">Media type</div>-->
        <div class="ei-title">{{ video_3.title }}</div>
        <div class="ei-date">{{ dateFilter(video_3.publishTime, "MM/yyyy") }}</div>
      </div>
      <div class="eitm-card" v-if="video_4">
        <div class="eitm-img" @click="showDetail(video_4)">
          <img :src="video_4.coverUrl">
          <div class="cover">
            <img src="/video/play2.png">
          </div>
        </div>
        <!--                <div class="ei-type">Media type</div>-->
        <div class="ei-title">{{ video_4.title }}</div>
        <div class="ei-date">{{ dateFilter(video_4.publishTime, "MM/yyyy") }}</div>
      </div>
    </div>
<!--    <div class="em-more-btn">-->
<!--      All Media-->
<!--    </div>-->
  </div>

  <div class="dialogContent">
    <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
      <VideoDetail :resourceUrl="currentVideo.resourceUrl"
                   :title="currentVideo.title"
                   :des="currentVideo.des"
                   :publishTime="currentVideo.publishTime"></VideoDetail>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {filename} from "pathe/utils";
const config = useRuntimeConfig();
const apiURL = config.public.apiURL;

const dialogVisible = ref(false)
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  time: {
    type: String,
    required: false,
  },
});

const video_1 = props.data[0]
const video_2 = props.data[1]
const video_3 = props.data[2]
const video_4 = props.data[3]

const currentVideo = ref();
const showDetail = (item) => {
  dialogVisible.value = true;
  currentVideo.value = item;
}
// const downloadClick = (link: string) => {
//   let url = link;
//   let fileName = url.slice(url.lastIndexOf("/") + 1); //下载的文件名换成自己的
//   // let fileName = item.title; //dayjs
//   var xhr = new XMLHttpRequest();
//   xhr.open("GET", url, true);
//   xhr.responseType = "blob"; // 返回类型blob
//   xhr.onload = () => {
//     if (xhr.readyState === 4 && xhr.status === 200) {
//       let blob = xhr.response;
//       let downLoadUrl = window.URL.createObjectURL(
//           new Blob([blob]
//               // ,{
//               //   type: item.type === "video" ? "video/mp4" : "image/jpeg",
//               // }
//           )
//       );
//       let a = document.createElement("a");
//       a.download = fileName;
//       a.href = downLoadUrl;
//       a.style.display = "none";
//       document.body.appendChild(a);
//       a.click();
//       a.remove();
//     }
//   };
//   xhr.send();
// }

const downloadClick = (link: string) => {
  let url = link;
  let fileName = url.slice(url.lastIndexOf("/") + 1); //下载的文件名换成自己的
  // let fileName = item.title; //dayjs
  console.log(fileName);
  const a = document.createElement('a');
  a.href = `/api/file/download/video/${fileName}`;
  a.download = fileName;
  // a.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  a.click();
}

</script>
<style scoped lang="scss">
.dialogContent {

  :deep(.el-dialog) {
    width: 1024px;
    padding: 0px;
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__footer) {
    padding: 10px;
    padding-left: 32px;

  }


  .dialogVideoContent video {
    width: 1024px;
  }

  .detailContent {
    width: 1024px;
    padding: 10px 30px;

    .detailContent-left {
      width: 900px;
      display: inline-block;
      padding: 10px;

      .dialog-title {
        line-height: 32px;
        font-size: 22px;
        color: #000;
        // margin-top: 12px;
        font-weight: 600;

      }

      .dialog-dsc {
        line-height: 22px;
        color: #000;
        font-size: 100%;

      }

      .dialog-date {
        margin-top: 12px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.25);
      }
    }

    .detailContent-right {
      width: 50px;
      display: inline-block;

      .emc-btn {
        width: 32px;
        height: 32px;
        background-image: url('/images/home/组23@2x.png');
        background-size: cover;
        border: 2px dashed rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: background-color .3s;
      }
    }

  }

}

.ex-in-the-media {
  position: relative;
  width: 1600px;
  // height: 1500px;
  background-color: #fff;
  padding: 100px 160px;


  .eitm-title {
    position: absolute;
    left: 157px;
    top: 32px;

    .t1 {
      color: #26B7BC;
      width: 600px;
      font-size: 64px;
      font-weight: 600;
      margin-bottom: 6px;
      background: linear-gradient(180deg, #26B7BC 0%, #C78E66 100%);
      border-radius: 0px 0px 0px 0px;
      background-size: cover;
      /* 将图片按文本范围进行裁剪 */
      -webkit-background-clip: text;
      /* 将文字内容设置为透明，从而显示裁切后的图片底色 */
      color: transparent;

    }

    .des {
      color: #C78E66;
      font-size: 16px;
    }
  }

  .eitm-content-img {
    width: 1600px;
    max-height: 584px;
    // background-color: rgba(0, 0, 0, 0.15);
    padding-top: 130px;

    video {
      width: 100%;
      height: 584px;
    }
  }

  .eitm-type {
    width: 100%;
    padding: 0 60px;
    padding-top: 30px;

    .et-title {
      color: #C78E66;
      margin: 16px 0;
      font-weight: 600;
      font-size: 16px;
    }

    .et-content {
      display: inline-flex;
      justify-content: space-between;
      width: 100%;

      .et-left {
        // width: 50%;

        .et-left-title {
          color: #000000;
          font-size: 28px;
          margin-bottom: 24px;
          font-weight: 600;
        }

        .et-left-date {
          color: #000;
          font-size: 12px;
        }
      }

      .et-right {
        // width: 50%;
        margin-left: 200px;
        width: 200px;
        font-size: 12px;
        line-height: 22px;

        .emc-btn {
          width: 32px;
          height: 32px;
          background-image: url('/images/home/组23@2x.png');
          background-size: cover;
          border: 2px dashed rgba(0, 0, 0, 0.2);
          cursor: pointer;
          transition: background-color .3s;
        }
      }
    }
  }

  .eitm-content {
    // width: 100%;
    margin-top: 30px;
    display: inline-flex;
    justify-content: space-between;
    width: 1600px;
    // padding: 0 60px;

    .eitm-card {
      width: 506px;
      height: 380px;

      .eitm-img {
        margin-bottom: 20px;
        max-height: 285px;
        cursor: pointer;

        img {
          width: 506px;
          height: 285px;
          // cursor: pointer;
          object-fit: cover;
          transition: all 0.6s;
          z-index: 20;
        }

        .cover {
          position: relative;
          bottom: 288px;
          width: 506px;
          height: 285px;
          background-color: rgba(0, 0, 0, 0.3);
          opacity: 1;
          text-align: center;
          z-index: 999;

          img {
            width: 70px;
            height: 70px;
            position: relative;
            top: 120px;
            // transform: translateY(-50%);
            max-width: 283px;
            transition: all 0.6s;
          }

        }

        .cover:hover img {
          transform: scale(1.1);
        }

      }

      // .eitm-img:active .cover {
      //     transition: all 1s;
      //     // width: 311px;
      //     // height: 245px;
      //     // background: "/images/video/play.png" center;
      //     z-index: 99999;
      //     opacity: 1;
      // }


      .ei-type {
        color: #C78E66;
        font-size: 14px;
        margin-top: 21px;
        font-weight: 600;
      }

      .ei-title {
        font-size: 20px;
        width: 506px;
        color: #000;
        margin-top: 24px;
        font-weight: 600;
        margin-bottom: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .ei-date {
        margin-top: 24px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }

  .em-more-btn {
    margin-top: 30px;
    // margin-left: 60px;
    width: 296px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: rgb(199, 142, 102, 0.08);
    border-bottom: 4px solid #C78E66;
    color: #000000;
    cursor: pointer;
    transition: background-color .3s;
    font-size: 16px;
    user-select: none;
  }

  .em-more-btn:hover {
    background-color: rgb(199, 142, 102, 0.28);
  }

  .pagination-box {
    position: absolute;
    right: 150px;
    bottom: 100px;
  }
}
</style>
